<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
<!--    <meta name="viewport" content="width=device-width, initial-scale=1.0">-->
    <meta name="renderer" content="webkit">
    <!--[if lt IE 9]>-->
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <th:block th:include="include :: header('查看设备信息')" />
    <style>
        .newsTableBox{
            /*overflow: hidden;*/
            /*position: relative;*/
            /*width: 100%;*/
        }
        .newsTableBox thead{
            display: flex;
            display: -o-flex;
            display: -ms-flex;
            display: -moz-flex;
            display: -webkit-flex;
            flex-wrap: wrap;
            align-items: center;
            justify-content: flex-start;
        }
        .newsTableBox tbody{
            /*width: 100%;*/
            display: flex;
            display: -o-flex;
            display: -ms-flex;
            display: -moz-flex;
            display: -webkit-flex;
            flex-wrap: wrap;
            align-items: center;
            justify-content: flex-start;
        }

        .newsTableBox tbody tr{
            /*width: 14.25%;  !**265px ***!*!*/
            display: flex;
            display: -o-flex;
            display: -ms-flex;
            display: -moz-flex;
            display: -webkit-flex;
            flex-wrap: wrap;
            align-items: center;
            justify-content: flex-start;
        }
        .newsTableBox tbody tr td{
            /*width: 33.3%;*/
            padding: 0;
        }

        .newsTableBox tr,.newsTableBox td,.newsTableBox th{
            border: none;
        }

    </style>

</head>
<body  class="gray-bg">
<div class="wrapper wrapper-content animated fadeInRight ibox-content">
    <form class="form-horizontal m" id="form-dxf-edit">
            <div>
                <div class="form-group" align="center">
                    <div class="select-list">
                        <ul>
                            <li>
                                <p>文件编码：</p>
                                <input type="text" id="fileCode"  name="system" th:value="${dwgIndex.fileCode}" />
                            </li>
                            <li style="width: 23%">
                                <p>文件名称：</p>
                                <input type="text" id="fileName" style="width: 76%; float: left; align-content: center" th:value="${dwgIndex.fileName}" th:title="${dwgIndex.fileName}"/>
                            </li>
                            <li>
                                <p>版本：</p>
                                <input type="text" id="version" style="width: 50%; float: left" th:value="${dwgIndex.version}" />
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="form-group">
                    <div class="select-list">
                        <ul>
                            <li>
                                <p>系统：</p>
                                <input type="text" id="system" th:value="${dwgIndex.system}" style="align-content: center"/>
                            </li>
                            <li style="width: 23%">
                                <p>子项：</p>
                                <input type="text" id="subitem" th:value="${dwgIndex.subitem}" style="width: 76%; float: left; align-content: center"/>
                            </li>
                            <li>
                                <p>版次：</p>
                                <input type="text" id="edition" th:value="${dwgIndex.edition!=null?dwgIndex.edition:''}" style="width: 50%"/>
                            </li>
                            <input id="fileId" th:value="${dwgIndex.fileId}" type="hidden">
                            <input id="dxfimg" th:value="${images}" type="hidden">
                        </ul>
                    </div>

                </div>
            </div>
            <div align="left">
                <div>
                    <input type="button" style="width: 6%; height: 27px; background-color: #1c94c4; font-size: 16px; color: white" onclick="submitHandler()" value="保存">
                </div>
            </div>

        <div class="row">
            <div class="btn-group-sm" id="toolbar" role="group">
                <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">添加</button>
<!--                <button type="button" class="btn btn-primary" onclick="submitHandler()">保存</button>-->
            </div>

            <div id="tableDiv" class="col-sm-12 select-table table-striped">
                <table id="bootstrap-table" class="newsTableBox" style="border-collapse: collapse;">

                </table>
            </div>
        </div>
    </form>



</div>
<div class="ibox-content">
    <div class="modal inmodal" id="myModal" tabindex="-1"  aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content animated bounceInRight">
                <div class="modal-body">
                    <div class="form-group">
                        <label>设备编码</label>
                        <input type="text" id="contC" placeholder="请输入设备编码" class="form-control">
                    </div>
                    <div class="form-group">
                        <label>X坐标</label>
                        <input type="text" id="px" placeholder="请输入x坐标" class="form-control">
                    </div>
                    <div class="form-group">
                        <label>Y坐标</label>
                        <input type="text" id="py" placeholder="请输入y坐标" class="form-control">
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-white"  data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary" onclick="addEquipment()" data-dismiss="modal">保存</button>
                </div>
            </div>
        </div>
    </div>
</div>
<th:block th:include="include :: footer" />
<th:block th:include="include :: bootstrap-table-editable-js" />
<script th:inline="javascript">
    var prefix = ctx + "dxfcomponent/cad";
    // 判断该图纸是否已经存在
    function submitHandler() {

        var url = prefix + "/check";
        var flag = true;
        var fileCode = $("#fileCode").val();
        var fileName = $("#fileName").val();
        console.log(fileCode);
        if (fileCode=="" && fileName==""){
            $.modal.alert("文件编码和文件名称不能为空");
            flag = false;
        }
        if (fileCode==""){
            $.modal.alert("文件编码不能为空");
            flag = false;
        }
        if(fileName==""){
            $.modal.alert("文件名称不能为空");
            flag = false;
        }
        if(flag==true){
            // 获取索引信息的json
            var objIndex =
                {
                    "fileCode": fileCode,
                    "version": $("#version").val(),
                    "edition": $("#edition").val(),
                };
            var system = $("#system").val();
            system = system.substr(0,1);
            if(!isNaN(system)){
                $.modal.confirm('“系统“编码首位为数字，是否继续提交？',function(){
                    saveModalCheck(url, objIndex);
                });
            }else {
                saveModalCheck(url, objIndex);
            }
        }
    }


    /***
     * 获取所有的设备信息
     */
    function submitData(flag){

        var url = prefix + "/save";
        var objEquipment= $('#bootstrap-table').bootstrapTable('getData',false);

        var objIndex =
            {
                "fileCode": $("#fileCode").val(),
                "fileName": $("#fileName").val(),
                "version": $("#version").val(),
                "edition": $("#edition").val(),
                "system": $("#system").val(),
                "subitem": $("#subitem").val(),
                "dxfImg": $("#dxfimg").val(),
                "fileId": parseInt($("#fileId").val())
            };

        var data = {
            "objEquipment" : objEquipment,
            "objIndex" : objIndex,
            "flag" : flag
        }
        saveModal(url,data);
        $.modal.alertSuccess('操作成功！');
    }

    function saveModalCheck(url, data) {
        var parent = window.parent;
        var config = {
            url: url,
            type: "post",
            dataType: "json",
            contentType: "application/json;charset=UTF-8",
            data: JSON.stringify(data),
            beforeSend: function () {
                $.modal.loading("正在处理中，请稍后...");
            },
            success: function(result) {
                if (typeof callback == "function") {
                    callback(result);
                }
                if (result!=0) {
                    // $.modal.alertSuccess(result.msg);
                    $.modal.confirm('此图纸数据已存在，是否更新或覆盖原有图纸数据？',function(){
                        submitData("true");
                        successCallback();
                    });
                    // if(window.confirm('数据已存在，是否覆盖原有数据？')){
                    //     submitData("true");
                    //     successCallback();
                    // }
                }else {
                    submitData("false");
                    successCallback();
                }
                $.modal.closeLoading();
            }
        };
        $.ajax(config)
    }

    // 保存信息 弹出提示框
    function saveModal(url, data) {
        var parent = window.parent;
        var config = {
            url: url,
            type: "post",
            dataType: "json",
            contentType: "application/json;charset=UTF-8",
            data: JSON.stringify(data),
            beforeSend: function () {
                $.modal.loading("正在处理中，请稍后...");
            },
            success: function(result) {
                if (typeof callback == "function") {
                    callback(result);
                }
                if (result.code == web_status.SUCCESS) {
                    // $.modal.alertSuccess(result.msg);
                    window.opener.successCallback();
                    window.close();
                } else if (result.code == web_status.WARNING) {
                    $.modal.alertWarning(result.msg)
                    successCallback();
                } else {
                    $.modal.alertError(result.msg);
                }
                $.modal.closeLoading();
            }
        };
        $.ajax(config)
    }

    //var datas = [[${@dict.getType('sys_normal_disable')}]];

    var ly = '';
    var removeFlag = [[${@permission.hasPermi('dxfcomponent:cad:remove')}]];
    $(function() {
        var fId = [[${fileId}]];
        var options = {
            url: prefix + "/component/" + fId,
            removeUrl: prefix + "/remove",
            showSearch: false,
            showRefresh: false,
            showToggle: false,
            showColumns: false,
            pagination: false,
            uniqueId: 'positionX',
            showPageGo: true,
            onEditableSave: onEditableSave,
            onLoadSuccess: function () {
                var data= $('#bootstrap-table').bootstrapTable('getData',true);

                if(data.length>0){
                    tableStyle();
                }

            },
            columns: [
                {
                    field : 'contentO',
                    title : '设备原始数据',
                    visible: false,
                },
                {
                    title : "序号",
                    //width : '3%',
                    align: "center",
                    formatter: function (value, row, index) {
                        return $.table.serialNumber(index);
                    }
                },
                {
                    field : 'contentC',
                    title : '设备编码',
                    //width : '5%',
                    align: "center",
                    //visible: false,
                    editable: true
                },
                {
                    field : 'type',
                    title : '设备类型',
                    visible: false,
                },
                {
                    field : 'layer',
                    title : '图层',
                    visible: false
                },
                {
                    field : 'positionX',
                    title : 'X坐标',
                    visible: false
                },
                {
                    field : 'positionY',
                    title : 'Y坐标',
                    visible: false
                },
                {
                    title: '操作',
                    //width : '5%',
                    align: 'center',
                    formatter: function(value, row, index) {
                        var actions = [];
                        // actions.push('<a class="btn btn-danger btn-xs" onclick="remove(\'' + row.contentC + '\')"><i class="fa fa-remove"></i>删除</a>');
                        actions.push('<a href="javascript:void(0)" onclick="removeRow(\'' + row.positionX + '\')">删除</a>');
                        return actions.join('');
                    }
                }]
        };
        $.table.init(options);

        //设置表格表头宽度
        $("#bootstrap-table thead tr").append("<th style=\"text-align: center;\" data-field=\"1\" tabindex=\"0\"><div class=\"th-inner \">序号</div><div class=\"fht-cell\"></div></th>")
        .append("<th style=\"text-align: center;\" data-field=\"contentC\" tabindex=\"0\"><div class=\"th-inner \">设备编码</div><div class=\"fht-cell\"></div></th>")
            .append("<th style=\"text-align: center;\" data-field=\"1\" tabindex=\"0\"><div class=\"th-inner \">操作</div><div class=\"fht-cell\"></div></th>")
            .append("<th style=\"text-align: center;\" data-field=\"1\" tabindex=\"0\"><div class=\"th-inner \">序号</div><div class=\"fht-cell\"></div></th>")
            .append("<th style=\"text-align: center;\" data-field=\"contentC\" tabindex=\"0\"><div class=\"th-inner \">设备编码</div><div class=\"fht-cell\"></div></th>")
            .append("<th style=\"text-align: center;\" data-field=\"1\" tabindex=\"0\"><div class=\"th-inner \">操作</div><div class=\"fht-cell\"></div></th>")
            .append("<th style=\"text-align: center;\" data-field=\"1\" tabindex=\"0\"><div class=\"th-inner \">序号</div><div class=\"fht-cell\"></div></th>")
            .append("<th style=\"text-align: center;\" data-field=\"contentC\" tabindex=\"0\"><div class=\"th-inner \">设备编码</div><div class=\"fht-cell\"></div></th>")
            .append("<th style=\"text-align: center;\" data-field=\"1\" tabindex=\"0\"><div class=\"th-inner \">操作</div><div class=\"fht-cell\"></div></th>")
            .append("<th style=\"text-align: center;\" data-field=\"1\" tabindex=\"0\"><div class=\"th-inner \">序号</div><div class=\"fht-cell\"></div></th>")
            .append("<th style=\"text-align: center;\" data-field=\"contentC\" tabindex=\"0\"><div class=\"th-inner \">设备编码</div><div class=\"fht-cell\"></div></th>")
            .append("<th style=\"text-align: center;\" data-field=\"1\" tabindex=\"0\"><div class=\"th-inner \">操作</div><div class=\"fht-cell\"></div></th>")
            .append("<th style=\"text-align: center;\" data-field=\"1\" tabindex=\"0\"><div class=\"th-inner \">序号</div><div class=\"fht-cell\"></div></th>")
            .append("<th style=\"text-align: center;\" data-field=\"contentC\" tabindex=\"0\"><div class=\"th-inner \">设备编码</div><div class=\"fht-cell\"></div></th>")
            .append("<th style=\"text-align: center;\" data-field=\"1\" tabindex=\"0\"><div class=\"th-inner \">操作</div><div class=\"fht-cell\"></div></th>");

        // 设置表格大小
        // $(".newsTableBox tbody").width($("#bootstrap-table").width());

    });

    function onEditableSave (field, row, oldValue, $el) {
        // alert("字段名：" + field + "，当前值：" + row[field]  + "，旧值：" + oldValue);
    }

    function removeRow(n){
        $("#" + table.options.id).bootstrapTable('removeByUniqueId', n);
        tableStyle();
    }
    function addEquipment(){
        var data= $('#'+table.options.id).bootstrapTable('getData',true);

        var contC = $("#contC").val();
        var ly = data[0].layer;
        var px = $("#px").val();
        var py = $("#py").val();

        $("#contC").val('');
        $("#px").val('');
        $("#py").val('');
        $("#" + table.options.id).bootstrapTable('insertRow', {
            index: 0, // 你想插入到哪，0表示第一行
            row: {
                contentO : contC,
                contentC: contC,
                layer: ly,
                positionX: px,
                positionY: py,
                type: 'E',
                // userBalance: 10 + randomId,
            }
        })
        // 设置表格样式
        tableStyle();
    }

    function successCallback() {
        var parent = window.parent;

        $.modal.close();
        $.modal.alertSuccess('操作成功！');
        parent.$.table.refresh();

        $.modal.closeLoading();
        $.modal.enable();

    }

    // 设置表格样式
    function tableStyle() {
        // console.log("表格比例："+($("#tableDiv").width()/$("#bootstrap-table tbody tr").width()));
        // console.log("表格比例11："+($("#tableDiv").width()/6));
        var  width = $("#tableDiv").width();
        $("#bootstrap-table tbody tr").css("border-right","1px solid #C0C0C0");
        $("#bootstrap-table tbody tr").width(($("#tableDiv").width()/6)-5);
        $("#bootstrap-table tbody tr td").width(($("#bootstrap-table tbody tr").width()/4));
        $("#bootstrap-table").width($("#bootstrap-table tbody tr").width()*6+6);
        // console.log("表格TR长度："+$("#bootstrap-table tbody tr").width());
        // console.log("表格长度："+$("#bootstrap-table").width());
        // console.log("表格Div长度："+$("#tableDiv").width());
        // console.log("表格TR TD长度："+$("#bootstrap-table tbody tr td").width());
        $("#bootstrap-table thead th").width(($("#bootstrap-table").width()/18)-1);
        // console.log("表格TR TH长度11："+(($("#bootstrap-table").width()/18)-1));
        // console.log("表格TR TH长度："+$("#bootstrap-table thead th").width());
    }
</script>
</body>
</html>